{extend name="sitehome@style/base" /}
{block name="main"}
<style>
.layui-inline.btn-right {float: right;}
.layui-row-box{padding: 20px;}
</style>
<div class="layui-row-box">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12 layui-form">
            <div class="layui-input-inline">
                <input type="text" placeholder="请输入服务名称" class="layui-input search_text">
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select name="modules" lay-verify="required" id="search_type" lay-search="" class="search_type" lay-filter="search_type">
                        <option value="0">全部</option>
                        <option value="1">生效中</option>
                        <option value="2">已过期</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline btn-right">
                <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
                <button type="reset" lay-submit lay-filter="clear" class="layui-btn layui-btn-primary">清除条件</button>
            </div>
        </div>
    </div>
</div>
<div class="layui-tab">
    <table id="service_list" lay-filter="servicelist"></table>
</div>
<script type="text/html" id="operation">
	{{# if(d.validity_time != 0){ }}
    <a class="default" lay-event="renewalFee">立即续费</a>
	{{# } }}
</script>
<script type="text/html" id="titleTpl">
    {{# if(d.status == 0 || d.status == 2){ }}
    <span style="color:#f00">{{d.status_name}}</span>
    {{# }else{ }}
    <span style="">{{d.status_name}}</span>
    {{#}}}
</script>
<script>
var table = new Table({
	elem: '#service_list',
    filter : "servicelist",
	url : '{:url("sitehome/addons/service")}',
	where : {'search_text':$('.search_text').val(), 'search_type': $('.search_type').val()},
	cols: [[
		{field: 'title', width: '25%', title: '服务名称'},
		{field: 'expire_time', width: '25%', title: '到期时间'},
		{field: 'status_name', width: '25%', title: '服务状态', 'templet': '#titleTpl'},
		{field: '', width: '24%', title: '操作', toolbar: '#operation', 'style': 'color: #f00'}
	]]
});

//监听工具条
table.tool(function(obj){
	var data = obj.data;
	location.href = nc.url('sitehome/addons/buy', {"name" : data.addon_name});
});

layui.use(['form'], function() {
	var form = layui.form;
	form.on('submit(search)', function (data) {
		var search_text = $('.search_text').val();
		var search_type = $('.search_type').val();
		
		//重载表格
		table.reload({
			where: {'search_text': search_text, 'search_type': search_type},
			page: {
				curr: 1
			}
		});
	});
	
	//监听清除条件
	form.on('submit(clear)', function (data) {
		$('.search_text').val('');
		$('#search_type').val('0');
		form.render("select");
	});
})
</script>
{/block}